1. 同樣的內容，兩種讀法

G5 結尾我提到一件事:交接檔我後來從 .md 換成了 .html。這篇就是來說明這個轉變的心路歷程。

先講我為什麼換。

這個念頭最早不是我自己想到的 —— 印象中是在國外的論壇上看到有人在討論。那串討論的切入點很有意思:現在主流的大模型，跟使用者溝通時預設都是用 markdown。這已經變成一種不言而喻的慣例，幾乎沒人回頭去質疑它。

但那串討論就把問題攤開來了 —— markdown 的語法本來就很簡單。簡單是它的優點，卻也是它的天花板:字體大小沒辦法分層次、沒有顏色可以標重點、表格的能力也很陽春。當你要傳達的東西一多、一複雜，它就裝不下了。

所以那串討論的結論是:那何不直接讓模型改用 HTML 回你？ 同樣是一份文字，HTML 能承載的表達方式多太多，你也就更容易看懂它到底給了你什麼。

我看到的時候心裡「咦」了一下 —— 因為那正好戳中我當時的困擾。

純文字的 .md 打開來，是一整片黑白。標題跟內文差不多大、重點跟雜訊長得一樣、五個段落看起來都同等重要。結果就是:我每次打開一份它產的報告或交接檔，都得從頭讀一遍，才知道哪裡是我現在需要的。

換成 .html 之後，同樣一份內容，它可以把重點放大、把關鍵決定標成醒目的顏色、把三個方案排成一張表格。我掃一眼就知道現在在哪、下一步是什麼。

內容一模一樣。差的是我要花多少力氣才讀得懂。

🎯 先說明一個誤解:這不是「調教技巧」。 換成 HTML 不會讓 Claude 變聰明。對它來說，.md 和 .html 都只是文字，理解能力沒有差別。好處全部發生在「你」這一端 —— 是你看得更快、更準。這篇講的是一個「讓自己讀得輕鬆」的工作流，不是什麼提示詞魔法。

2. HTML 多出來的，是「用看的」

這裡我們先不聊技術，你只要知道 HTML 比純文字多了哪三件事:

• ① 層次 —— 重點可以放大、次要的可以縮小、標題和內文明顯分開。你掃一眼就抓得到主線，不用逐字讀。
• ② 標記 —— 顏色、粗體、底色框。「這是關鍵決定」「這裡有雷」「這件事還沒做」可以一眼區分開，不會混在同一片文字裡。
• ③ 結構 —— 表格、卡片、分區塊。比較三個方案的時候，一張表格完勝三段文字 —— 差異就攤在同一行上，不用你自己在腦中對照。

講穿了就一句話:

.md 只能「說」;.html 可以「指」。

純文字要靠你自己讀完、自己判斷哪裡重要;HTML 可以直接把重要的東西指給你看。當一份東西你只想快速掃過去抓重點，這個差別很有感。

講再多，不如直接看

下面是同一份交接檔(就是 G5 那種)的兩個版本。內容一字不差，只是裝的方式不同 —— 你可以感覺一下，哪一邊你比較快找到「下一步要做什麼」:

第一份沒有錯，資訊全都在。但那是七十幾行同樣顏色、同樣大小的字 —— ##、-、反引號全混在一起，你得一行一行讀下去，才能自己判斷哪句重要。

第二份把判斷的工作先做掉了。最上面那排 7 / 2 / 4，你連讀都不用讀就知道這專案「做完七項、卡住兩項、還有四項沒動」;往下滑，橘色那塊是「不要推翻的決定」、綠色那塊是「接手先做這個」 —— 它們自己會跳出來找你。

差別不在資訊量，在你要花多少力氣才能把它讀出來。而且這份東西你不會只看一次 —— 每次回來都省一遍，才是它划算的地方。

3. 我實際上都在什麼時候用

這幾年做公司專案、課堂專案、比賽，我大概是在這些場合請它產 HTML —— 共通點都是**「東西一多就亂」**:

• 交接檔 —— 就是 G5 那個。打開來就看到「做到哪、下一步、別碰什麼」，不用讀完整份才知道現在的狀態。
• 調研 / 比較報告 —— 「A 方案跟 B 方案差在哪」這種東西，排成表格三秒看完，寫成三段文字要讀三分鐘。
• 資料分析、圖表 —— 數字本來就適合用看的。與其給我一串數值，不如給我一張圖或一張整理過的表。
• 專案規劃、架構說明 —— 分區塊呈現，哪一塊負責什麼、彼此怎麼接，一眼看得出來。
• wireframe —— 這個最特別，下一節單獨講。

你會發現這些都不是「一句話就能回答」的東西，而是資訊有結構、而且我會回頭看很多次的那種。這正是 HTML 划算的地方。

4. 最有感的一招:叫它畫一張 wireframe

這招我自己用下來最有感，所以獨立講。

情境是這樣:你要做一個頁面，腦中大概有個樣子 —— 「左邊放清單、右邊放詳細內容、上面有一條搜尋列」。你把這句話打給 Claude，它照著做了。

然後你打開來一看:跟你想的不一樣。

問題不在它做錯，而在**「版面」這種東西，用文字描述本來就很難對齊**。同一句「左邊放清單」，你腦中的寬度、它腦中的寬度，可能差很多。你講一百字，也不保證兩邊想的是同一張圖。

所以我現在會先講這句:

幫我畫一個 wireframe，讓我比較好理解

它會產一份 HTML，你用瀏覽器打開，版面就在眼前。這時候要對齊就容易了 —— 你直接說:

這塊移到右邊
搜尋列不要放最上面，放在清單上方就好
右邊那塊再加一個「儲存」按鈕

看著畫面改，比對著文字猜精準太多。

重點是「來回」，不是一次到位

要先講一件事，免得你第一次試就失望:它畫出來的第一版，通常不會完全是你要的。

這很正常 —— 它又不知道你腦中那張圖。第一版的作用只是把討論從「文字」搬到「畫面」上。真正有價值的是接下來的兩三輪:你看一眼、指出哪裡不對、它改、你再看。通常來回個兩三次，就會收斂到你要的樣子。

這個過程之所以快，是因為每一輪你都只需要「看」而不需要「想像」。文字來回三次，你可能還在猜它理解對了沒;畫面來回三次，你已經確定了。

畫完之後呢？

對齊之後，就可以直接讓它照著做:

就照這個 wireframe 的版面，幫我實作出來

這時候的差別在於:它手上有一個你已經點頭的版面，而不是一段可能被誤解的描述。你省掉的是「做完一整頁才發現方向錯了、整個打掉重來」的那種浪費。

🎯 這招的本質:把「我以為的」跟「它以為的」攤開來對。 wireframe 不是要做出漂亮的設計稿，它是一個「確認我們想的是同一件事」的工具。花一分鐘看一張草圖，好過做完一整頁才發現方向錯了。

5. 怎麼叫它做:臨時講 vs 寫進去

兩種方式，看你是偶爾要、還是每次都要。

臨時要 —— 直接講就好

想要的時候講一句就行，不用任何設定:

幫我用 HTML 呈現
幫我畫一個 wireframe

大部分時候我就是這樣用的。想看得清楚時才講，不想要就不講。

每次都要 —— 寫進 CLAUDE.md

如果你發現自己每次都在講同一句，那就別再每次講了 —— 把它寫進 G3 教過的 CLAUDE.md:

產出報告、調研、交接文件時，用 HTML 格式，
不要用純 markdown。重點請用顏色和層次標出來。

💡 這正是 G3 講過:「每次開新對話都得跟它講一遍的東西」，才值得寫進 CLAUDE.md。 「我要 HTML」如果變成你的固定偏好，它就完全符合這條標準。

如果產出來很陽春怎麼辦？

你第一次試，很可能會覺得:「這也沒多好看啊。」 那通常是因為你只講了「用 HTML」，沒講你要什麼樣子 —— 它不知道你的喜好，只好給你最保守的預設值。

解法就是多講一句。這種要求它都聽得懂:

用深色背景，重點用橘色標出來
三個方案排成表格比較
待辦事項用框框起來，做完的打勾

直接拿去用:一份完整的樣式指令

如果你懶得自己想，下面這段可以整段複製貼上。這就是我自己在用的那套 —— 你在這篇文章看到的深色配橘色，就是照這個長出來的:

之後產出 HTML 文件時，請照這個樣式:

【配色】深色底(#0E1A1F)，卡片區塊用深一點的藍灰(#122229)，
內文用米白色(#C9C3B4)，標題用亮米白(#F5F2EA)。
重點色用橘色(#FF6B35)，正向/完成的東西用綠色(#00D9A3)。

【字體】標題用襯線字體(serif)並加斜體，內文用無襯線(sans-serif)，
程式碼和標籤用等寬字(monospace)。中文請一併指定 Noto Sans TC。

【排版】內容寬度限制在 760px 置中，段落行高 1.7，
標題和內文的大小要明顯拉開差距。

【重點呈現】
- 關鍵資訊用橘色底色的區塊框起來
- 待辦/下一步用綠色系標出來
- 警告或「別碰」的東西用橘色左邊框
- 需要比較的東西一律排成表格
- 每個區塊上面加一個小小的等寬字標籤(像 GOAL、NEXT)

【其他】不要用外部圖片或 CDN，所有樣式寫在同一個檔案裡，
這樣我雙擊就能直接用瀏覽器打開。

💡 這只是起點，改成你喜歡的樣子。 顏色、字體、寬度全部都可以換 —— 想要淺色背景就把顏色碼改掉，不喜歡斜體標題就拿掉那句。你甚至可以直接跟它說「把配色換成藍色系」，讓它幫你改這段指令。這份 prompt 的用途是讓你有個能動的起點，而不是要你照單全收。

而且這件事跟上面一樣 —— 如果你每次都要同一種風格，就把這段一起寫進 CLAUDE.md，之後產出來的東西風格就固定了，不用每次重講。

產完怎麼看？

不用裝任何東西 —— 直接用瀏覽器打開那個檔案就好。我自己都是這樣，雙擊打開、看完就關掉。

6. 什麼時候值得，什麼時候 .md 就夠

老實說，HTML 不是萬用解。它有兩個很實在的代價:

• 比較花 token。 同樣的內容包成 HTML，它要多寫一堆標籤 —— 那些標籤全都算 token(G2 講過的白板，字越多越貴)。一句話就能回答的問題包成 HTML，純粹是浪費。
• 不好自己改。 這點我覺得更關鍵。.md 你想改哪一行、直接改就好;.html 的內容夾在一堆標籤中間，你想自己動一下反而卡手卡腳。

所以我的判準很簡單:

要**「產出來給人看」的 → HTML。
還要「一直改」**的 → .md 就好。

換句話說:這份東西如果它是「成品」，就讓它漂亮一點;如果是「半成品」，留著讓你好改比較實在。

7. 本課單字:讓它畫給你看

延續系列慣例，這篇收三個 —— 兩句話、一個複習:

「幫我用 HTML 呈現」

萬用句。當一份東西有結構、你想快速掃過去抓重點時用它。 報告、比較、規劃、交接檔都適用。

「幫我畫一個 wireframe」

要討論版面、但用文字講不清楚時用。先看到畫面，再對著畫面改 —— 比打一百字描述精準得多。

寫進 CLAUDE.md(複習 G3)

如果你每次都要 HTML，就別每次講 —— 寫進 CLAUDE.md 讓它變成預設。這正是 G3 說的「每次都得交代的事才值得寫進去」。

8. 給新手的三個提醒

a. 好處在你這端，不是 Claude 變聰明

再強調一次:HTML 不會提升它的理解能力。這招的價值是你讀得更快。搞清楚這件事，你才不會期待錯方向。

b. 你完全不用會寫 HTML

你只要會說「幫我用 HTML 呈現」和「這塊改成 OO」就夠了 —— 寫的人是它，你只負責看和提意見。 這篇從頭到尾沒有要你學任何語法。

c. 會一直改的東西，留給 .md

別為了漂亮把所有東西都包成 HTML。成品用 HTML，半成品用 .md —— 這樣你既看得舒服，也還改得動。

結語

這篇講的其實是一件很小、但每天都在發生的事:你要花多少力氣，才能看懂 Claude 給你的東西。

純文字沒有錯，它一直都能用。但當一份東西有結構、有層次、而且你會回頭看很多次 —— 讓它多花幾秒排成 HTML，你之後每次打開都省下幾分鐘。

而且你不用學任何語法。你只要記得一句話:「幫我用 HTML 呈現」。

到這裡，前六篇都在處理「你和 Claude 之間怎麼傳資訊」:規矩怎麼常駐、記憶怎麼累積、進度怎麼交接、產出怎麼呈現。

接下來要換一個方向了 —— 不是傳什麼給它，而是它「怎麼想」。同一件事，你可以叫它用最聰明(也最貴)的模型慢慢想，也可以用便宜快速的直接做掉。什麼時候該用哪一種？這筆帳我在 G2 講用量時就欠著，下一篇來還。

下一篇 G7 — 控制 Claude 怎麼想:選模型與思考深度。同樣的任務，用對模型可以又快又省;用錯的話，不是慢就是貴。這篇會把「什麼時候該用聰明的、什麼時候便宜的就夠」講清楚 —— 也把 G2 欠的那筆帳還完。

系列文章

• G1 Claude Code 從零開始 — Portfolio v2 重做
• G2 用量與計費 — 搞懂怎麼收費，再決定要不要省
• G3 CLAUDE.md — 讓 Claude 跨對話記得你的專案
• G4 Memory 系統 — 讓 Claude 不只記得專案，還記得你
• G5 換 section 不斷線 — 把當下進度交接給下一個對話
• G6(本篇) 用 HTML 跟 Claude 溝通 — 讓你一眼看懂它給你的東西
• G7 控制 Claude 怎麼想 — 選模型與思考深度(規劃中)

完整 20 篇地圖會放在系列首頁。本系列同步發佈於 Medium。

關於我

Tim Wei / Technology Consulting Consultant @ EY Taiwan，專注於 Responsible AI、金融業 ML 落地。

歡迎在留言區跟我討論，或在 LinkedIn 上找我。